<template>
  <div class="dingdan">
    <div class="header">
      <!-- <span class="left">
        < </span> -->
      <router-link to="/waimai" tag="span" class="left iconfont icon-Previous">
        </router-link>
          <span>订单</span>
          <span></span>
    </div>
    <div class="zhong">
      <div class="z1" v-show="show">
        <div class="tu">
          <img src="../assets/2.png" alt="">
        </div>

        <div class="deng">
          <p>登录后查看外卖订单</p>
          <p class="p" @click="p">立即登录</p>
        </div>
      </div>
      <div class="dian" v-show="show">
        <div class="z2">
          <img src="../assets/1.png" alt="">
        </div>
        <div class="xia">
          <div class="duan">
            <h3 @click="dian">短信登录</h3>
            <div class="din">
              <input type="text" value="手机号">
              <input type="text" value="验证码">
              <p>
                温馨提示：未注册饿了么帐号的手机号，登录时将自动注册，且代表您已同意
                <span class="yan">《用户服务协议》</span>
              </p>
              <button>登录</button>
            </div>
          </div>
          <div class="shou">
            <h3>密码登录</h3>
            <!-- <div class="din">
              <input type="text" value="手机号">
              <input type="text" value="验证码">
              <p>
                温馨提示：未注册饿了么帐号的手机号，登录时将自动注册，且代表您已同意
                <span class="yan">《用户服务协议》</span>
              </p>
              <button>登录</button>
            </div> -->
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      show: true
    };
  },
  methods: {
    p: function() {
      console.log(1);
      this.show = !this.show;
    }
  }
};
</script>
<style lang="less" scoped>
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}
.dingdan {
  background: rgb(245, 245, 245);
}
.header {
  width: 100%;
  .px2rem(height,86);
  background: linear-gradient(90deg, rgb(0, 170, 255), rgb(0, 134, 255));
  display: flex;
  align-items: center;
  justify-content: space-between;
  .px2rem(font-size,37);
  font-weight: bolder;
  color: #ffffff;
  position: sticky;
  top: 0;
  span {
    width: 33%;
    text-align: center;
  }
  .left {
    text-align: left;
    .px2rem(padding-left,20);
  }
}
.zhong {
  .z1 {
    display: block;

    .tu {
      width: 100%;
      background: rgb(245, 245, 245);
      .px2rem(margin-top,100);
      .px2rem(height,400);
      display: flex;
      justify-content: center;
      z-index: 9;
      img {
        width: 60%;
      }
    }
    .deng {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      p {
        .px2rem(font-size,38);
        .px2rem(margin-top,50);
      }
      .p {
        background: green;
        .px2rem(height,80);
        .px2rem(width,200);
        .px2rem(font-size,28);
        text-align: center;
        .px2rem(line-height,80);
      }
    }
  }
  .z2 {
    width: 100%;
    .px2rem(height,200);
    display: flex;
    justify-content: center;
    background: #ffffff;
    position: fixed;

    top: 0;
    left: 0;
  }
  .xia {
    .px2rem(margin-top,200);
    width: 100%;
    display: flex;
    justify-content: space-around;
    .px2rem(font-size,40);
  }

  .din {
    position: fixed;
    display: flex;
    flex-direction: column;
    // .px2rem(height,300);
    width: 70%;

    input {
      .px2rem(margin-top,30);
      .px2rem(height,50);
      border: 1px solid #cccccc;
      width: 100%;
    }
    button {
      .px2rem(margin-top,30);
      .px2rem(height,80);
      background: blue;
      border: none;
      .px2rem(font-size,30 );
    }
    p {
      .px2rem(margin-top,30);
      .px2rem(font-size,24 );
    }
    .yan {
      color: blue;
    }
  }
}
.dian {
  display: none;
}
</style>
